import React,{PureComponent} from 'react'
import {View,Button,SafeAreaView,Text,StyleSheet,TextInput,ScrollView,Dimensions,TouchableOpacity} from 'react-native'
import color from "../../../widget/color";
import RefreshListView, {RefreshState} from "react-native-refresh-list-view";
import MineUnPayCell from '../../../widget/mine/MineUnPayCell'
import MineShiXiaoCell from '../../../widget/mine/MineShiXiaoCell'
import MineUnPayDetailScene from './MineUnPayDetailScene'
import RefreshList from "../../../widget/multystateview/RefreshList";
import {fetchGetRequest,fetchPostRequest} from "../../../api/NetworkTool";
import method from "../../../api/method";
import api from "../../../api/api";
import Tips from 'react-native-root-tips'
import PayAlertDialog from '../../../widget/dialog/PayAlertDialog'
import XPay from "react-native-puti-pay";
import {NavigationActions} from "react-navigation";
import NetTool from '../../../api/NetTool'
import EmptyCouponView from "../../../widget/CommonEmptyView";
import CommonAlertDialog from '../../../widget/dialog/CommonAlertDialog'

const {width, height} = Dimensions.get('window')

type Props = {
    navigation:any,
}
type State = {
    data: Array<Object>,
    refreshState: number,
}
export default class MineUnPayOrderScene extends PureComponent<Props,State>{
    static navigationOptions = ({navigation}: any) => ({
        headerTintColor:'white',
        headerStyle:{
            backgroundColor:color.globalMainColor
        },
        title:'我的订单',
    });
    constructor(props) {
        super(props)
        this.state = {
            data: [],
            refreshState: RefreshState.Idle,
            show_alert:false,
            order_id:'',
        }
    }
    componentDidMount() {
        this.requestFirstPage()
    }
    requestData = async() =>{

        let params = {
            status:'unpaid',
        }
        let json = await NetTool.fetchGetRequest(api.getOrderList,method.get, params)


        let dataList = json.orders.map((info) => {
            return {
                course:info.course,
                payStatus: info.payStatus,
                payment: info.payment,
                price:info.price,
                orderSn:info.orderSn,
                id:info.id,
            }
        })

        return dataList
    }


    requestFirstPage = async() => {

        try {
            this.setState({refreshState: RefreshState.HeaderRefreshing})
            let dataList = await this.requestData()

            this.setState({
                data: dataList,
                refreshState: RefreshState.Idle,
            })
        } catch (error) {
            this.setState({
                refreshState: RefreshState.Failure,
            })
        }
    }
    requestNextPage = async() => {
    }



    //custon ui
    keyExtractor = (item: Object, index: number) => {
        return index + ''
    }
    cancelOrder(orderId){
        this.setState({show_alert:true,order_id:orderId})


    }
    confirmOpress(){
        let params = {
            orderId:this.state.order_id,
        }
        fetchPostRequest(api.cancelOrder,method.post,params)
            .then(res=>{
                this.requestFirstPage()
            })
            .catch(err=>{})
    }
    renderCell = ({item}: any) => {
        // if (item.payStatus == "unpaid"){
            return (
                <MineUnPayCell
                    info={item}  onPress={()=>{this.onCellUnPaySelected(item)}} cancelPress={()=>{
                        this.cancelOrder(item.id)}} payPress={()=>{
                    this.props.navigation.navigate('MineUnPayDetailScene',{orderId:item.id,callback:(data)=>{
                            this.requestFirstPage()
                        }})
                }}/>
            )
        // }else {
        //     return (
        //         <MineShiXiaoCell
        //             onPress={this.onCellSelected}
        //         />
        //     )
        // }
    }
    onCellUnPaySelected(info){
        this.props.navigation.navigate('MineUnPayDetailScene',{orderId:info.id,callback:(data)=>{
                this.requestFirstPage()
            }})
    }
    render(){
        return (
            <View style={{flex:1}}>
                <RefreshListView
                    ListHeaderComponent={() => (
                        !this.state.data.length?
                            <EmptyCouponView height={(height-200)} tip={'您还没有订单'} source={require('../../../../res/img/order/dingdan.png')}/>
                            : null)
                    }
                    data={this.state.data}
                    renderItem={this.renderCell}
                    keyExtractor={this.keyExtractor}
                    refreshState={this.state.refreshState}
                    onHeaderRefresh={this.requestFirstPage}
                    onFooterRefresh={this.requestNextPage}
                />
                <CommonAlertDialog title={'确定取消订单？'} onPress={()=>{
                    this.confirmOpress()
                }} closeModal={(statu)=>{this.setState({show_alert:statu})}} confirmTitle={'确定'} show={this.state.show_alert}/>
            </View>
        )
    }
}